<template>
	<view class="menu-box">
		<view  v-for="item,index in menuList" :key="item.id">
			<view class="menu-box-inner" v-if="msgUserId==userId || !item.isShowSelf" @click="clickMenu(item.type,content)">
				<image class="menu-icon" :src="item.icon" />
				<view class="text-style">{{ item.name }}</view>									
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		msgUserId: {
			type: String,
			default: ""
		},
		msgId: {
			type: Number,
			default: 0
		},
		msgSortId: {
			type: Number,
			default: 0
		},
		content: {
			type: String,
			default: ""
		}
		,time: {
			type: String,
			default: ""
		}
	},
	data() {
		return {
			menuList: [
				{"id":1,"isShowSelf":true,"name":"撤回","type":"cancel","icon":"http://xxx/static/app/logo/publicLogo/cancel.png"},
				{"id":2,"isShowSelf":false,"name":"复制","type":"copy","icon":"http://xxx/static/app/logo/publicLogo/copy.png"},
				{"id":3,"isShowSelf":false,"name":"引用","type":"quote","icon":"http://xxx/static/app/logo/publicLogo/quote.png"}
			],
			userId: uni.getStorageSync("userId")
		}
	},
	methods: {
		
		//点击菜单
		clickMenu(type,text) {
			switch(type) {
				case "cancel":
					this.delMsg();
					break;
				case "copy":
					this.copyText(text)
					break;
				default:
					console.log(type)
			}
		},
		
		//撤回消息
		delMsg() {
			this.$request("/msg/delMsg","DELETE",{"msgId":this.msgId},{"Content-Type":"application/x-www-form-urlencoded"}).then(res=>{
				if (res.data.status=="ok") {
					uni.showToast({
						icon: "none",
						title: "消息已撤回",
						duration: 1000
					})	
					this.$emit("cancelMsg",this.msgSortId);
				}
			})
		},
		
		//复制信息
		copyText(text) {
			wx.setClipboardData({
				data: text,
				success(res) {
					 wx.getClipboardData({
						 success(res) {
							 uni.showToast({
							 	icon: 'none',
								title: "复制成功",
								duration: 1000
							 })
						 }
					 })
				}
			})
		}
	}
}
</script>

<style lang="scss">
center {
	display: flex;
	align-items: center;
	justify-content: center;
}	

.menu-box {
	min-width: 100rpx;
	height: 100rpx;
	@extend center;
	
.menu-box-inner {
	width: 90rpx;
	@extend center;
	flex-direction: column;
	
.menu-icon {
	width: 45rpx;
	height: 45rpx;
}

.text-style {
	font-size: 23rpx;
	color: #e6e6e6;
}
	}
}
</style>
